<template>
  <div class="data_left08" style="width: 29%">
    <div class="dataAllNo02">
      <div class="dataAllBorder01">
        <div class="bzzy_h6">
          <el-tooltip placement="top-start">
            <template #content>
              统计规则：<br />展示行政编制、政法编制、事业编制总量以及编制数量占比
            </template>
            <span>各区划编制总量展示</span>
          </el-tooltip>
        </div>
		<!--TAB切换-->
		<div class="btngroup">
		  <button
		    id="save"
		    @click.prevent="changePie(0)"
		    :class="classNum == 0 ? 'add tabpress' : null"
		  >
		    行政编制
		  </button>
		  <button
		    @click.prevent="changePie(1)"
		    :class="classNum == 1 ? 'add tabpress' : null"
		    id="snap"
		  >
		    政法编制
		  </button>
		  <button
		    @click.prevent="changePie(2)"
		    :class="classNum == 2 ? 'add tabpress' : null"
		    id="snap"
		  >
		    事业编制
		  </button>
		</div>
        <div
          id="businesstype"
          style="width: 98%; height: calc(100% - 90px); float: left"
        ></div>
      </div>
    </div>
	
  </div>
</template>
<script>
var myChart;
import Sever from "@/api/selfApi.js";
import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入
export default {
  props: ["selectCode"],
  name: "Qhbzzl",
  components:{
	  Sever
  },
  data() {
    return {
		
		classNum: 0,
      qhbzzlData: [],
      option: {
    backgroundColor: '#0F224C', //背景色
	// tooltip: {
	//     trigger: 'item',
	//     formatter:function(params){
			
	//     return 'aaa';
	//                 }
	  
	//   },
 title: {
    text: '行政编制总量：',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ffffff',
      fontSize: 18
    }
  },
    series: [
        {
            type: 'liquidFill', //水位图
            radius: '80%', //显示比例
            center: ['50%', '50%'], //中心点
            amplitude: 20, //水波振幅
            data: [], // data个数代表波浪数
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#446bf5',
                        },
                        {
                            offset: 1,
                            color: '#2ca3e2',
                        },
                    ],
                    globalCoord: false,
                },
            ], //波浪颜色
            backgroundStyle: {
                borderWidth: 1, //外边框
                // borderColor: '#23cc72', //边框颜色
                color: 'RGBA(51, 66, 127, 0.7)', //边框内部填充部分颜色
            },
            label: {
                //标签设置
                position: ['50%', '45%'],
                formatter: '60%', //显示文本,
                textStyle: {
                    fontSize: '40px', //文本字号,
                    color: '#fff',
                },
            },
            outline: {
                // show: false
                borderDistance: 0,
                itemStyle: {
                    borderWidth: 2,
                    borderColor: '#112165',
                },
            },
        },
    ],
},
    };
  },
 
  watch: {
    selectCode(newV) {
      console.log(newV, "sssssss");
      this.refreshData();
    },
  },
  methods: {
	  saveImageToBackend() {
	        // 将 echarts 图表转换为图片
	        const base64Data = myChart.getDataURL({
	          pixelRatio: 2,
	        });
	        
	        // 构建请求体数据
	        const requestData = {
	          image: base64Data,
	          depCode:this.selectCode,
	  			  name:this.selectCode+"3"+".png"
	        };
	  			
	  		
	        
	        Sever.smz
	            .getSaveImage(requestData)
	            .then((res) => {
	             
	            })
	            .catch((err) => {
	              console.log(err);
	            });
	        
	      },
	  changePie(num) {
	    this.classNum = num;
	    this.initEcharts();
	  },
    async refreshData() {
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = this.$echarts.init(document.getElementById("businesstype"));
      myChart.clear();
      myChart.showLoading("default", {
        text: "正在加载，请稍候...",
        color: "#c23531",
        textColor: "rgba(255, 255, 255, 0.5)",
        maskColor: "#00000000",
        zlevel: 0,
      });
	 console.log(this.selectCode);
      await Sever.smz
        .getQhbzzl({ depCode: this.selectCode })
        .then((res) => {
          if (res.code == 1) {
            console.log(res.data);
            let data = res.data;

            this.qhbzzlData = data;

            this.initEcharts();
          } else {
            console.log("接口请求错误！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    initEcharts() {
      myChart.hideLoading();
      if (this.classNum == 0) {
       this.option.series[0].label.formatter=this.qhbzzlData[0].dzqpercentage;
	   this.option.series[0].data=[];
	   this.option.series[0].data.push(this.qhbzzlData[0].dzqsw);
	   this.option.series[0].data.push(this.qhbzzlData[0].dzqsw);
	   this.option.series[0].color[0].colorStops=[
                        {
                            offset: 0,
                            color: '#a1c4fd',
                        },
                        {
                            offset: 1,
                            color: '#c2e9fb',
                        },
                    ];
	    this.option.title.text="行政编制总量:"+this.qhbzzlData[0].dzqBz;
      }else if (this.classNum == 1) {
       this.option.series[0].label.formatter=this.qhbzzlData[0].zfpercentage;
	   this.option.series[0].data=[];
	   this.option.series[0].data.push(this.qhbzzlData[0].zfsw);
	   this.option.series[0].data.push(this.qhbzzlData[0].zfsw);
	   this.option.series[0].color[0].colorStops=[
	                    {
	                        offset: 0,
	                        color: '#f6d365',
	                    },
	                    {
	                        offset: 1,
	                        color: '#fda085',
	                    },
	                ];
					 this.option.title.text="政法编制总量:"+this.qhbzzlData[0].zfBz;
      }else if (this.classNum == 2) {
       this.option.series[0].label.formatter=this.qhbzzlData[0].sypercentage;
	   this.option.series[0].data=[];
	   this.option.series[0].data.push(this.qhbzzlData[0].sysw);
	   this.option.series[0].data.push(this.qhbzzlData[0].sysw);
	   this.option.series[0].color[0].colorStops=[
	                    {
	                        offset: 0,
	                        color: '#a18cd1',
	                    },
	                    {
	                        offset: 1,
	                        color: '#fbc2eb',
	                    },
	                ];
					 this.option.title.text="事业编制总量:"+this.qhbzzlData[0].syBz;
      } 
	  

      this.option && myChart.setOption(this.option);
	 
      // 重置option属性
      this.option = this.$options.data.call(this).option;
      // 响应式变化
      window.addEventListener("resize", () => myChart.resize(), false);
    },
  },
  mounted() {
    this.refreshData();
  },
};
</script>